<template>
	<div id="me">
		<div class="head">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>个人信息管理</el-breadcrumb-item>
			</el-breadcrumb>
			<el-button type="info" @click="logout(false)">退出</el-button>
		</div>
		<!-- 卡片视图区 -->
		<el-card>
			<h1>个人信息</h1>
			<div class="zh">
				<h2>您的基础信息</h2>
				<div>
					<p>
						账号名：{{ user.userName ? user.userName : '您尚未设置登录账户名' }}
					</p>
					<span v-if="!user.userName" @click="updateUserName = true"
						>设置账号名</span
					>
					<span v-else @click="updateUserName = true">修改账号名</span>
				</div>
				<div class="img">
					<p>当前图片：</p>
					<div>
						<img :src="user.userImg" alt="" srcset="" />
						<span class="mb" @click="updateimg = true">修改图片</span>
					</div>
				</div>
				<div>
					<p>登录邮箱：{{ user.email ? user.email : '您尚未设置登录邮箱' }}</p>
					<span v-if="!user.email" @click="updateEmail = true">绑定邮箱</span>
					<span v-else @click="updateEmail = true">修改邮箱</span>
				</div>
				<div>
					<p>绑定手机：{{ user.phone }}</p>
					<span class="phone" @click="updatepone = true">修改手机</span>
				</div>
				<div>
					<p v-if="user.password">{{ user.password ? '***' : '' }}</p>
					<span v-if="!user.password" @click="updatepassword = true"
						>设置密码</span
					>
					<span  v-else  @click="updatepassword = true">修改密码</span>
				</div>
			</div>
		</el-card>
		<!-- 修改用户图片对话框 -->
		<el-dialog
			title="修改用户图片"
			:visible.sync="updateimg"
			width="50%"
			@closed="clearImg"
		>
			<UploadVue ref="addImgRef" @img="img" :limit="1"></UploadVue>
			<span slot="footer" class="dialog-footer">
				<el-button @click="clearImg">取 消</el-button>
				<el-button type="primary" @click="update_img">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改电话对话框 -->
		<el-dialog
			title="修改电话"
			:visible.sync="updatepone"
			width="50%"
			@closed="clearPhone"
		>
			<div id="needCaptcha">
				<div>
					<span>手机号码</span
					><el-input
						v-model="phone"
						placeholder="请输入手机号"
						prefix-icon="el-icon-mobile-phone
"
					></el-input>
				</div>
				<div class="b">
					<span>验证码</span>
					<el-input
						v-model="captcha"
						placeholder="请输入验证码"
						prefix-icon="iconfont icon-mimazhaohuiyanzhengma
"
					></el-input>
					<el-button type="text" @click="getCode"
						>{{ isNaN(captchaName) ? captchaName : captchaName + 's' }}
					</el-button>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="clearPhone">取 消</el-button>
				<el-button type="primary" @click="update_phone">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改邮箱对话框 -->
		<el-dialog
			title="修改邮箱"
			:visible.sync="updateEmail"
			width="50%"
			@closed="clearEmail"
		>
			<div id="needCaptcha">
				<div>
					<span>邮箱</span
					><el-input
						v-model="email"
						placeholder="请输入邮箱号"
						prefix-icon="el-icon-mobile-phone
"
					></el-input>
				</div>
				<div class="b">
					<span>验证码</span>
					<el-input
						v-model="captcha"
						placeholder="请输入验证码"
						prefix-icon="iconfont icon-mimazhaohuiyanzhengma
"
					></el-input>
					<el-button type="text" @click="getCode"
						>{{ isNaN(captchaName) ? captchaName : captchaName + 's' }}
					</el-button>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="clearEmail">取 消</el-button>
				<el-button type="primary" @click="update_email">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改用户名对话框 -->
		<el-dialog
			title="修改用户名"
			:visible.sync="updateUserName"
			width="50%"
			@closed="clearUserName"
		>
			<div id="needCaptcha">
				<div>
					<span>用户名</span
					><el-input
						v-model="userName"
						placeholder="请输入账号"
						prefix-icon="el-icon-mobile-phone
"
					></el-input>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="clearUserName">取 消</el-button>
				<el-button type="primary" @click="update_UserName">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改密码对话框 -->
		<el-dialog
			title="修改密码"
			:visible.sync="updatepassword"
			width="50%"
			@closed="clearpassword"
		>
			<div id="needCaptcha">
				<div>
					<span>密码</span
					><el-input
						v-model="password"
						placeholder="请输入密码"
						prefix-icon="el-icon-lock"
						show-password
					></el-input>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="clearpassword">取 消</el-button>
				<el-button type="primary" @click="update_Password">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import UploadVue from '@/components/rear-end/goods/Upload.vue'
	import isValid from '@/js/isValid'
	export default {
		name: 'MeVue',
		data() {
			return {
				userName: '',
				email: '',
				phone: '',
				user: {},
				imgUrl: '',
				//是否展示对话框
				updateDialogVisible: false,
				updatepone: false,
				updateimg: false,
				updateEmail: false,
				updateUserName: false,
				updatepassword: false,
				password:'',
				captcha: '',
				captcha1: '',
				captchaName: '获取验证码',
				//定时器
				countdown: '',
			}
		},
		components: { UploadVue },
		created() {
			this.do()
		},
		methods: {
			async do() {
				let res = await this.$api.sort.test()
				this.user = res.data.data
				
				if (this.user.userImg) {
					this.$api.rear_end.download(this.user.userImg).then((res) => {
						let url = window.URL.createObjectURL(
							new Blob([res.data], { type: 'image/jpeg' })
						)
						this.user.userImg = url
					})
				} else {
					this.user.userImg = require('@/assets/images/iyrkgi89.png')
				}
			},
			// 退出登录
			async logout(result = true) {
				if (!result) {
				 result = confirm('是否退出登录！')
				}
				if (result) {
					const res = await this.$api.sort.logout()
					if (res.data.code === 1) {
						this.$message.success('退出成功！')
						this.$cookies.remove('user')
						localStorage.clear()
						this.$router.push({ path: '/' })
					} else {
						this.$message.success('退出失败！')
					}
				}
			},
			//只修改图片
			async img(val) {
				this.imgUrl = val
				let res = await this.$api.sort.editUser({
					userImg: this.imgUrl,
					userId: this.user.userId,
				})
				if (res.data.code == 1) {
					console.log(this.imgUrl)
					this.$message.success('修改成功！')
					this.clearImg()
					this.updateimg = false
					this.logout()
				} else {
					this.$message.error(res.data.data)
				}
			},
			clearImg() {
				this.$refs.addImgRef.handleRemove1()
				this.imgUrl = ''
				this.updateimg = false
			},
			//修改数据库图片
			async update_img() {
				this.$refs.addImgRef.upload()
			},
			// 获取验证码
			async getCode() {
				let res = await this.$api.sort.getCode()
				if (res.data.code === 1) {
					this.captcha1 = res.data.data
					this.captcha = this.captcha1
					this.captchaName = 60
					// 更新倒计时的显示
					this.countdown = setInterval(() => {
						// 在页面上显示剩余时间
						this.captchaName -= 1
						// 如果倒计时结束，清除 interval
						if (this.captchaName < 1) {
							this.captchaName = '获取验证码'
							this.captcha1 = ''
							this.captcha = ''
							clearInterval(this.countdown)
						}
					}, 1000) // 每秒钟更新一次倒计时
				}
			},
			//验证用户名
			verify2() {
				if (this.userName.trim() === '') {
					this.$message.error('请输入用户名')
					return
				} else {
					let a = isValid.isvalidUsername(this.userName.trim())
					if (!a) {
						this.$message.error(
							'请输入正确的用户名，用户名要求最低三位的数字、字母、下划线'
						)
						return
					}
				}
				return true
			},
			//验证邮箱
			verify1() {
				if (this.email.trim() === '') {
					this.$message.error('请输入邮箱号')
					return
				} else {
					let a = isValid.isvalidEmail(this.email.trim())
					if (!a) {
						this.$message.error('请输入正确的邮箱号')
						return
					}
				}
				if (this.captcha1 === '') {
					this.$message.error('请获取验证码')
					return
				} else {
					if (this.captcha !== '') {
						if (this.captcha !== this.captcha1) {
							this.$message.error('验证码错误')
							return
						}
					} else {
						this.$message.error('请输入验证码')
						return
					}
				}
				return true
			},
			//验证手机号
			verify() {
				if (this.phone.trim() === '') {
					this.$message.error('请输入手机号')
					return
				} else {
					let a = isValid.isvalidPhone(this.phone.trim())
					if (!a) {
						this.$message.error('请输入正确的手机号')
						return
					}
				}
				if (this.captcha1 === '') {
					this.$message.error('请获取验证码')
					return
				} else {
					if (this.captcha !== '') {
						if (this.captcha !== this.captcha1) {
							this.$message.error('验证码错误')
							return
						}
					} else {
						this.$message.error('请输入验证码')
						return
					}
				}
				return true
			},
			//验证密码
			verify3() {
				if (this.password.trim === '') {
					this.$message.error('请输入密码')
					return
				} else {
					let a = isValid.isvalidPass(this.password)
					if (!a) {
						this.$message.error(
							'请输入正确的密码，长度在6~18之间，只能包含字母、数字和下划线'
						)
						return
					}
				}
				return true
			},
			//修改手机号
			async update_phone() {
				var c = this.verify()
				if (c) {
					let res = await this.$api.sort.editUser({
						phone: this.phone.trim(),
						userId: this.user.userId,
					})

					if (res.data.code == 1) {
						this.$message.success('修改成功！')
					} else {
						this.$message.error(res.data.data)
					}
					this.clearPone()
					this.logout()
				}
			},
			// 清除修改手机对话框
			clearPhone() {
				this.phone = ''
				this.captcha = ''
				this.captcha1 = ''
				this.captchaName = '获取验证码'
				clearInterval(this.countdown)
				this.updatepone = false
			},
			// 清除修改邮箱对话框
			clearEmail() {
				this.email = ''
				this.captcha = ''
				this.captcha1 = ''
				this.captchaName = '获取验证码'
				clearInterval(this.countdown)
				this.updateEmail = false
			},
			// 修改邮箱
			async update_email() {
				var c = this.verify1()
				if (c) {
					let res = await this.$api.sort.editUser({
						email: this.email.trim(),
						userId: this.user.userId,
					})

					if (res.data.code == 1) {
						this.$message.success('修改成功！')
					} else {
						this.$message.error(res.data.data)
					}
					this.clearEmail()
					this.logout()
				}
			},
			// 清除修改账号名对话框
			clearUserName() {
				this.userName = ''
				this.updateUserName = false
			},
			// 修改账户名
			async update_UserName() {
				var c = this.verify2()
				if (c) {
					let res = await this.$api.sort.editUser({
						userName: this.userName.trim(),
						userId: this.user.userId,
					})

					if (res.data.code == 1) {
						this.$message.success('修改成功！')
					} else {
						this.$message.error(res.data.msg)
					}
					this.clearEmail()
					this.updateUserName = false
					this.logout()
				}
			},
			// 清除修改账号名对话框
			clearpassword() {
				this.password = ''
				this.updatepassword = false
			},
			// 修改账户名
			async update_Password() {
				var c = this.verify3()
				if (c) {
					let res = await this.$api.sort.editUser({
						password: this.password.trim(),
						userId: this.user.userId,
					})

					if (res.data.code == 1) {
						this.$message.success('修改成功！')
					} else {
						this.$message.error(res.data.msg)
					}
					this.clearpassword()
					this.updatepassword = false
					this.logout()
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	#me {
		margin: 0;
		.head {
			.el-breadcrumb {
				float: left;
				font-size: 2rem;
			}
			.el-button {
				float: right;
			}
			padding-bottom: 10vh;
		}
		.el-card {
			h1 {
				font-size: 3rem;
				text-align: center;
			}
			.zh {
				margin-top: 20px;
				margin-left: 100px;
				div {
					display: flex;
					margin-top: 20px;
					p {
						margin-left: 20px;
						margin-top: 10px;
					}
					span {
						margin-left: 30px;
						margin-top: 10px;
						color: #5a67d7;
					}
					.phone {
						margin-left: 74px;
					}
				}
				.img {
					align-items: center;

					div {
						position: relative;
						z-index: 2;
						&:hover .mb {
							display: block;
						}
						img {
							width: 100%;
							height: 100%;
							max-width: 100px;
							max-height: 100px;
							border-radius: 4px;
						}
						.mb {
							display: none;
							position: absolute;
							left: -29px;
							bottom: 0;
							width: 100%;
							color: #fff;
							text-align: center;
							background-color: rgba(11, 11, 11, 0.6);
							border-radius: 4px;
							&:hover {
								cursor: pointer;
							}
						}
					}
				}
			}
		}
	}
	#needCaptcha {
		div {
			margin-top: 20px;
		}
		.b {
			position: relative;
			.el-button {
				position: absolute;
				left: 80%;
				top: 45px;
			}
		}
	}
</style>